<template>
  <div>
    <i-form :model='formValidate'
            ref='form'
            :rules='ruleValidate'>
      <i-form-item label='用户名'
                   prop='name'>
        <i-input v-model="formValidate.name"></i-input>
      </i-form-item>
      <i-form-item label='邮箱'
                   prop='mail'>
        <i-input v-model="formValidate.mail"></i-input>
      </i-form-item>
    </i-form>
    <i-button @on-click="handleSubmit"></i-button>
    <i-button @on-click="handleCancel">取消</i-button>
  </div>
</template>
<script>
import { iForm, iFormItem, iInput, iButton } from '../../components'
export default {
  components: { iForm, iFormItem, iInput, iButton },
  data () {
    return {
      formValidate: {
        name: '',
        mail: ''
      },
      ruleValidate: {
        name: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        mail: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('提交成功')
        } else {
          alert('校验失败')
          return false
        }
      })
    },
    handleCancel () {
      this.$refs.form.resetFields()
    }
  }
}
</script>